<template>
  <div class="fixed-menu">
    <div class="menu-list">
      <div class="menu-item">
        <div class="icon">
          <el-icon><Warning /></el-icon>
        </div>
        <div class="title">
          <p>反馈</p>
        </div>
      </div>
      <div class="menu-item">
        <div class="icon">
          <el-icon><Iphone /></el-icon>
        </div>
        <div class="title">
          <p>下载</p>
        </div>
      </div>
      <div class="menu-item">
        <div class="icon">
          <el-icon><Plus /></el-icon>
        </div>
        <div class="title">
          <p>关注</p>
        </div>
      </div>
      <div class="menu-item">
        <div class="icon">
          <el-icon><ShoppingCart /></el-icon>
        </div>
        <div class="title">
          <p>购物车</p>
        </div>
      </div>
      <div @click="backTop" class="menu-item">
        <div class="icon">
          <el-icon><CaretTop /></el-icon>
        </div>
        <div class="title">
          <p>顶部</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const backTop = () => {
  window.scrollTo(0, 0);
};
</script>

<style lang="scss" scoped>
.fixed-menu {
  position: fixed;
  right: 0;
  bottom: 150px;
  background: #fff;
  z-index: 999999;
  .menu-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    border: 1px solid #eaeaea;
    > .menu-item {
      padding: 3px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      border-top: 1px solid #eaeaea;
      font-size: 13px;
      color: #666;
      cursor: pointer;
      @include Hover($main-color, color);
    }
  }
}
</style>
